<template>
  <div class="form-box">
    <el-form
      ref="elForm"
      width="600px"
      :model="info"
      size="medium"
      label-width="135px"
      style="max-width: 1200px"
    >
      <el-form-item label="是否启用" prop="sEnableGAT1400">
        <el-switch
          v-model="form.sEnableGAT1400"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="传输协议类型" prop="sTransferTypeProtocol">
        <el-select
          v-model="form.sTransferTypeProtocol"
          :style="{ width: '100%' }"
        >
          <el-option label="HTTPS" value="HTTPS" />
          <el-option label="HTTP" value="HTTPS" />
        </el-select>
      </el-form-item>
      <el-form-item label="鉴权方式" prop="sAuthenticationMode">
        <el-select
          v-model="form.sAuthenticationMode"
          :style="{ width: '100%' }"
        >
          <el-option label="MD5/SHA256" value="MD5/SHA256" />
          <el-option label="SHA256" value="SHA256" />
        </el-select>
      </el-form-item>
      <el-form-item label="坐标类型" prop="sCoordinateType">
        <el-select v-model="form.sCoordinateType" :style="{ width: '100%' }">
          <el-option label="绝对值坐标" value="absolute" />
          <el-option label="万分比坐标" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="平台地址" prop="sCloudPlatformAddress">
        <el-input
          v-model="form.sCloudPlatformAddress"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="端口号" prop="sCloudPlatformPort">
        <el-input
          type="number"
          v-model="form.sCloudPlatformPort"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="设备ID" prop="sDeviceID">
        <el-input
          type="number"
          v-model="form.sDeviceID"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="卡口编号" prop="sCheckpointNumber">
        <el-input
          type="number"
          v-model="form.sCheckpointNumber"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="sUsername">
        <el-input
          type="number"
          v-model="form.sUsername"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="sPassword">
        <el-input
          type="password"
          v-model="form.sPassword"
          placeholder="请输入"
          :style="{ width: '100%' }"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordConfirm">
        <el-input
          type="password"
          v-model="form.passwordConfirm"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          style="width: 120px"
          @click="submitForm"
          :loading="isLoading"
          >保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getGa1400Api, editGa1400Api } from "@/api/network";

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeName: "first",
      isLoading: false,
      form: {
        sEnableGAT1400: "",
        sTransferTypeProtocol: "",
        sAuthenticationMode: "",
        sCoordinateType: "",
        sCloudPlatformAddress: "",
        sCloudPlatformPort: "",
        sDeviceID: "",
        sCheckpointNumber: "",
        sUsername: "",
        sPassword: "",
      },
    };
  },
  created() {
    this.getGa1400();
  },
  methods: {
    getGa1400() {
      getGa1400Api().then((res) => {
        console.log(res[0]);
        this.form = res[0];
      });
    },
    submitForm() {
      editGa1400Api(this.form).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  width: 600px;
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
